<template>
  <div>
    <h1>app</h1>
    <h2>{{count}}</h2>
    <input type="text" v-model.number="num"><br/>

    <button @click="addAct(num)">加法</button><br/>
    <button @click="addObj(num)">加法对象格式</button><br/>

    <button @click="decrementAct(num)">减法</button><br/>
    <button @click="decrementObjAct(num)">减法对象格式</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
  export default {
    data(){
      return{
        num:1,
      };
    },
    computed:{
      ...mapState(["count"]),
    },
    methods:{
      addAct(num){
        this.$store.commit("add",num);
      },
      addObj(num){
        this.$store.commit({
          type:"addObj",
          num,
        })
      },

      decrementAct(num){
        this.$store.dispatch("decrementAct",num);
      },
      decrementObjAct(num){
        this.$store.dispatch({
          type:"decrementObjAct",
          num,
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>